<template>
  <div class="echarts-line-index" ref="chartsLine"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { curTheme } from './theme'

const props = defineProps({
  /**
   * listKey 中的属性 和 value 的形式
   */
   list: {
    type: Array,
    default: []
  },

  // list 列表中的 key 值
  listKey: {
    type: String,
    default: 'label'
  },

  // custom 支持 rich 富文本 【label， value 的 形式】
  tooltipType: {
    type: String,
    default: ''
  }
})

const chartsLine = ref(null)
const myChart = ref(null)

const customFormatter = (params) => {
  const curItem = props.list.find(item => item[props.listKey] == params[0].name)
  return `
    <div class='custom-line-tooltip'>
      <div class='header'>
        <span>${ curItem?.[props.listKey] }</span>
        <span>总数:${ curItem?.value }</span>
      </div>
      ${ (curItem?.rich?.map(cur => {
        return `
          <div class='grades-item'>
            ${ cur.label }：${ cur.value }
          </div>`
      }))?.join('') }
    </div>
  `
}

const options = {
  tooltip: {
    trigger: 'axis',
    confine: true,
    backgroundColor: curTheme.tooltipBg,
    borderColor: curTheme.tooltipBg,
    axisPointer: {
      type: 'none'
    },
    textStyle: {
      color: curTheme.color
    }
  },
  grid: {
    left: '1%',
    right: '1%',
    top: '6%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: [],
    offset: 10,
    boundaryGap: false,
    axisTick: {
      show: false
    },
    axisLabel: {
      fontSize: '14px',
      color: curTheme.color
    },
    axisLine: {
      show: true,
      lineStyle: {
        type: 'solid',
        color: curTheme.xAxisColor
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      fontSize: '14px',
      color: curTheme.color
    },
    minInterval: 1,
    splitLine: {
      lineStyle: {
        color: curTheme.ySplitLineColor,
        type: 'dashed'
      }
    }
  },
  series: [
    {
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbolSize: 10,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: 'rgba(48, 255, 230, 0.9)' },
          { offset: 1, color: 'rgba(48, 255, 230, 0.5)'}
        ]),
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(48, 255, 230, 0.4)' },
          { offset: 0.8, color: 'rgba(63, 255, 241, 0)' }
        ])
      },
      data: []
    }
  ]
}

onMounted(() => {
  // echarts 实例对象不能转为代理对象会影响一些属性
  myChart.value = markRaw(echarts.init(chartsLine.value))

  window.addEventListener('resize', function() {
    myChart.value.resize()
  })
})

onUnmounted(() => {
  window.removeEventListener('resize', function() {
    myChart.value.resize()
  })
})

watch(() => props.list, (newVal) => {
  options.xAxis.data = newVal.map(item => item[props.listKey])
  options.series[0].data = newVal.map(item => item.value)

  if(props.tooltipType === 'custom') {
    options.tooltip.formatter = customFormatter
  }

  nextTick(() => {
    myChart.value?.clear()
    if(newVal.length > 0) {
      myChart.value?.setOption(options)
    } else {
      myChart.value?.setOption(curTheme.notDataOption)
    }
  })
}, {
  deep: true,
  immediate: true
})
</script>

<style lang="scss" scoped>
.echarts-line-index {
  :deep(.custom-line-tooltip) {
    width: 180px;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #31DACB;
      font-size: 16px;
      font-weight: bold;
    }
    .grades-item {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: v-bind('curTheme.color');
      &:not(:first-child) {
        margin-top: 6px;
      }
    }
  }
}
</style>
